import React from 'react';
import { Modal, Row, Col, Form, Input, Button, Radio } from 'antd';
import moment from 'moment';
import { connect } from 'umi';
import BModal from '@/components/complexComp/BModal';
import NameBox from '../NameBox';
import NameSpace from '../NameSpace';
const { TextArea } = Input;
import styles from './index.less';

@connect(({ select }) => ({
  userLIstMap: select.userLIstMap,
}))
export default class extends React.Component {
  state = {
    checkVal: 1,
    rejectReason: '',
  };
  componentDidMount() {
    this.props.dispatch({
      type: 'select/getUserList',
      payload: { pageSize: 10000000, pageNum: 1 },
    });
  }
  onClose() {
    this.props.onClose();
  }
  handleOk() {
    const { rejectReason, checkVal } = this.state;
    const { dataMsg } = this.props.data;
    this.props.onSubmit({
      type: checkVal,
      rejectReason,
      dataMsg,
    });
  }
  render() {
    const { userLIstMap } = this.props;
    const { checkVal, rejectReason } = this.state;
    const {
      dataMsg = {},
      boxtype = '',
      isVisable = false,
      title = '',
      boxType,
    } = this.props.data;
    console.log(this.props.data);
    var config = {};
    if (boxtype == 'check') config.footer = null;
    const layout = {
      labelCol: {
        style: { width: '105px' },
      },
      wrapperCol: {
        style: {},
      },
    };
    return (
      <BModal
        title={title}
        width={'800px'}
        onOk={this.handleOk.bind(this)}
        close={this.onClose.bind(this)}
        visible={isVisable}
        moreConfig={config}
      >
        {boxType == 1 ? (
          <Form {...layout} layout="vertical">
            <Row gutter={16}>
              <Col span={8}>
                <Form.Item label="数据源名称">
                  <span className={styles.labelStyle}>{dataMsg.name}</span>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="数据源类型"></Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={8}>
                <Form.Item label="所属空间">
                  <span className={styles.labelStyle}>
                    <NameSpace nameId={dataMsg.expandField} />
                  </span>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="有效期">
                  <span className={styles.labelStyle}>
                    {moment(dataMsg.startTime).format('YYYY-MM-DD') +
                      ' - ' +
                      moment(dataMsg.endTime).format('YYYY-MM-DD')}
                  </span>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={8}>
                <Form.Item label="负责人">
                  <span className={styles.labelStyle}>
                    {userLIstMap[dataMsg.applyUserId]?.name}
                  </span>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item label="申请时间">
                  <span className={styles.labelStyle}>
                    {moment(dataMsg.createTime).format('YYYY-MM-DD HH:MM:SS')}
                  </span>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={8}>
                <Form.Item label="申请账号">
                  <span className={styles.labelStyle}>
                    {userLIstMap[dataMsg.applyUserId]?.username}
                  </span>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span={8}>
                <Form.Item label="申请原因">
                  <span className={styles.labelStyle}> {dataMsg.reason}</span>
                </Form.Item>
              </Col>
            </Row>

            {boxtype != 'check' ? (
              <div>
                <Row gutter={16}>
                  <Col span="8">
                    <Form.Item label="审批结果">
                      <span className={styles.labelStyle}>
                        <Radio.Group
                          value={checkVal}
                          onChange={e => {
                            console.log(e);
                            this.setState({
                              checkVal: e.target.value,
                            });
                          }}
                        >
                          <Radio value={1}>通过</Radio>
                          <Radio value={2}>驳回</Radio>
                        </Radio.Group>
                      </span>
                    </Form.Item>
                  </Col>
                </Row>
                {checkVal == 2 ? (
                  <Row>
                    <Form.Item label="审核意见">
                      <span className={styles.labelStyle}>
                        <TextArea
                          onChange={e => {
                            this.setState({
                              rejectReason: e.target.value,
                            });
                          }}
                          value={rejectReason}
                          showCount
                          maxLength={100}
                          autoSize={{ minRows: 2, maxRows: 6 }}
                        />
                      </span>
                    </Form.Item>
                  </Row>
                ) : null}
              </div>
            ) : null}
          </Form>
        ) : null}
        {boxType == 2 ? (
          <Form {...layout} layout="vertical">
            <Row gutter={16}>
              <Col span="8">
                <Form.Item label="API名称">
                  <span className={styles.labelStyle}> {dataMsg.name}</span>
                </Form.Item>
              </Col>
              <Col span="8">
                <Form.Item label="API分组">
                  <span className={styles.labelStyle}>
                    <NameBox nameId={dataMsg.expandField} />
                  </span>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span="8">
                <Form.Item label="审批类型">
                  <span className={styles.labelStyle}> test</span>
                </Form.Item>
              </Col>
              <Col span="8">
                <Form.Item label="有效期">
                  <span className={styles.labelStyle}>
                    {moment(dataMsg.startTime).format('YYYY-MM-DD') +
                      ' - ' +
                      moment(dataMsg.endTime).format('YYYY-MM-DD')}
                  </span>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span="8">
                <Form.Item label="申请账号">
                  <span className={styles.labelStyle}>
                    {dataMsg.applyUserName}
                  </span>
                </Form.Item>
              </Col>
              <Col span="8">
                <Form.Item label="申请时间">
                  <span className={styles.labelStyle}>
                    {moment(dataMsg.applyTime).format('YYYY-MM-DD HH:mm:ss')}
                  </span>
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={16}>
              <Col span="8">
                <Form.Item label="申请原因">
                  <span className={styles.labelStyle}>{dataMsg.reason}</span>
                </Form.Item>
              </Col>
            </Row>
            {boxtype != 'check' ? (
              <div>
                <Row gutter={16}>
                  <Col span="8">
                    <Form.Item label="审批结果">
                      <span className={styles.labelStyle}>
                        <Radio.Group
                          value={checkVal}
                          onChange={e => {
                            console.log(e);
                            this.setState({
                              checkVal: e.target.value,
                            });
                          }}
                        >
                          <Radio value={1}>通过</Radio>
                          <Radio value={2}>驳回</Radio>
                        </Radio.Group>
                      </span>
                    </Form.Item>
                  </Col>
                </Row>
                {checkVal == 2 ? (
                  <Row>
                    <Form.Item label="审核意见">
                      <span className={styles.labelStyle}>
                        <TextArea
                          onChange={e => {
                            this.setState({
                              rejectReason: e.target.value,
                            });
                          }}
                          value={rejectReason}
                          showCount
                          maxLength={100}
                          autoSize={{ minRows: 2, maxRows: 6 }}
                        />
                      </span>
                    </Form.Item>
                  </Row>
                ) : null}
              </div>
            ) : null}
          </Form>
        ) : null}
      </BModal>
    );
  }
}
